<template>
  <view 
    class="fu-step"
    :class="[
      `fu-step--${direction}`,
      {
        'fu-step--dot': dot,
        'fu-step--active': isActive,
        'fu-step--finish': isFinish
      }
    ]"
    :style="[
      {
        color: getCurrentColor
      }
    ]"
  >
    <!-- 指示器 -->
    <view class="fu-step__indicator">
      <view 
        class="fu-step__circle"
        :style="[
          {
            backgroundColor: isActive ? activeColor : '',
            borderColor: isActive ? activeColor : ''
          }
        ]"
      >
        <text v-if="!dot" class="fu-step__number">{{ index + 1 }}</text>
      </view>
      
      <!-- 连接线 -->
      <view 
        class="fu-step__line"
        :class="[{ 'fu-step__line--hidden': isLast }]"
        :style="[
          {
            backgroundColor: isFinish ? activeColor : ''
          }
        ]"
      ></view>
    </view>
    
    <!-- 内容 -->
    <view class="fu-step__content">
      <view class="fu-step__title">
        <slot name="title">{{ title }}</slot>
      </view>
      <view class="fu-step__desc">
        <slot name="desc">{{ desc }}</slot>
      </view>
    </view>
  </view>
</template>

<script>
/**
 * fu-step 步骤项组件
 * @description 步骤条的子组件，用于展示每个步骤的具体内容
 * @property {String} title - 标题
 * @property {String} desc - 描述
 */
export default {
  name: 'fu-step',
  props: {
    title: String,
    desc: String
  },
  inject: ['steps'],
  data() {
    return {
      index: 0,
      isLast: false
    }
  },
  computed: {
    direction() {
      return this.steps.direction()
    },
    dot() {
      return this.steps.dot()
    },
    activeColor() {
      return this.steps.activeColor() || 'var(--fu-primary-color)'
    },
    inactiveColor() {
      return this.steps.inactiveColor() || 'var(--fu-text-color-disabled)'
    },
    isActive() {
      return this.index === this.steps.active()
    },
    isFinish() {
      return this.index < this.steps.active()
    },
    getCurrentColor() {
      return this.isActive || this.isFinish ? this.activeColor : this.inactiveColor
    }
  },
  mounted() {
    const { index, isLast } = this.steps.addStep(this)
    this.index = index
    this.isLast = isLast
  },
  beforeDestroy() {
    this.steps.removeStep(this)
  }
}
</script>

<style lang="scss" scoped>
.fu-step {
  position: relative;
  margin-right: 20rpx;
  
  &:last-child {
    margin-right: 0;
  }
  
  &__indicator {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
  }
  
  &__circle {
    width: 32rpx;
    height: 32rpx;
    border: 2rpx solid currentColor;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #fff;
    transition: all 0.3s;
    position: relative;
    z-index: 2;
    
    // 激活和完成状态
    .fu-step--active &,
    .fu-step--finish & {
      background-color: currentColor;
      
      .fu-step__number {
        color: #fff;
      }
    }
  }
  
  &__number {
    font-size: 24rpx;
    line-height: 1;
    color: currentColor;
  }
  
  &__line {
    flex: 1;
    height: 2rpx;
    background-color: currentColor;
    transition: all 0.3s;
    position: relative;
    z-index: 1;
    
    &--hidden {
      display: none;
    }
  }
  
  &__content {
    margin-top: 16rpx;
    flex: 1;
  }
  
  &__title {
    font-size: var(--fu-font-size-base);
    line-height: 1.5;
    transition: color 0.3s;
  }
  
  &__desc {
    margin-top: 8rpx;
    font-size: var(--fu-font-size-sm);
    color: var(--fu-text-color-secondary);
    transition: color 0.3s;
  }
  
  // 点状样式
  &--dot {
    .fu-step__circle {
      width: 12rpx;
      height: 12rpx;
      border: none;
      background-color: currentColor;
      opacity: 0.3;
      transition: opacity 0.3s;
    }
    
    .fu-step__number {
      display: none;
    }
    
    .fu-step__line {
      margin: 0 8rpx;
    }
    
    &.fu-step--active,
    &.fu-step--finish {
      .fu-step__circle {
        opacity: 1;
      }
    }
  }
  
  // 垂直方向
  &--vertical {
    display: flex;
    padding: 16rpx 0;
    margin-right: 0;
    margin-bottom: 20rpx;
    
    &:last-child {
      margin-bottom: 0;
    }
    
    .fu-step__indicator {
      flex-direction: column;
      margin-right: 16rpx;
      height: 100%;
    }
    
    .fu-step__line {
      width: 2rpx;
      flex: 1;
      margin: 12rpx 0;
      
      &--hidden {
        display: none;
      }
    }
    
    .fu-step__content {
      margin-top: 0;
      flex: 1;
    }
  }
  
  // 水平方向
  &--horizontal {
    text-align: center;
    
    .fu-step__indicator {
      justify-content: center;
      margin-bottom: 16rpx;
    }
    
    .fu-step__line {
      position: absolute;
      left: calc(50% + 16rpx);
      right: calc(-50% + 16rpx);
      top: 50%;
      transform: translateY(-50%);
      
      &--hidden {
        display: none;
      }
    }
    
    .fu-step__content {
      padding: 0 16rpx;
    }
  }
}
</style> 